<!--
 * 单元格组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-tag text="基础使用"></pure-tag>
        </app-demo-module>

        <!-- 主题 -->
        <app-demo-module title="主题">
            <view class="tags">
                <pure-tag text="内置主题" theme="primary"></pure-tag>
                <pure-tag text="内置主题" theme="success"></pure-tag>
                <pure-tag text="内置主题" theme="danger"></pure-tag>
                <pure-tag text="内置主题" theme="warning"></pure-tag>
                <pure-tag text="内置主题" theme="info"></pure-tag>
                <pure-tag text="自定义中国红主题" theme="--app-theme-china-red"></pure-tag>
            </view>
        </app-demo-module>

        <!-- 幽灵标签 -->
        <app-demo-module title="幽灵标签">
            <view class="tags">
                <pure-tag ghost text="幽灵标签" theme="primary"></pure-tag>
                <pure-tag ghost text="幽灵标签" theme="success"></pure-tag>
                <pure-tag ghost text="幽灵标签" theme="danger"></pure-tag>
                <pure-tag ghost text="幽灵标签" theme="warning"></pure-tag>
                <pure-tag ghost text="幽灵标签" theme="info"></pure-tag>
            </view>
        </app-demo-module>

        <!-- 镂空标签 -->
        <app-demo-module title="镂空标签">
            <view class="tags">
                <pure-tag text="镂空标签" plain theme="primary"></pure-tag>
                <pure-tag text="镂空标签" plain theme="success"></pure-tag>
                <pure-tag text="镂空标签" plain theme="danger"></pure-tag>
                <pure-tag text="镂空标签" plain theme="warning"></pure-tag>
                <pure-tag text="镂空标签" plain theme="info"></pure-tag>
            </view>
        </app-demo-module>

        <!-- 标签图标 -->
        <app-demo-module title="标签图标">
            <view class="tags">
                <pure-tag ghost text="标签图标" theme="primary" iconName="__biaoqing"></pure-tag>
            </view>
        </app-demo-module>

        <!-- 可关闭 -->
        <app-demo-module title="可关闭">
            <view class="tags">
                <pure-tag ghost text="可关闭" theme="success" iconName="__biaoqing" closeable></pure-tag>
            </view>
        </app-demo-module>

        <!-- 圆角标签 -->
        <app-demo-module title="圆角标签">
            <view class="tags">
                <pure-tag ghost text="圆角标签" theme="primary" iconName="__biaoqing" round></pure-tag>
            </view>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss">
    .tags {
        --app-theme-china-red: #ff0000;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }
</style>
